<template>
	<a-modal :footer="null" :visible="visible" :title="title" @ok="handleOk" @cancel="handleCancel" width="600px">
		<a-form ref="formRef" :model="formState" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol"
			@finishFailed="onFinishFailed" @finish="onFinish">

			<a-form-item label="商品名称" name="name">
				<a-input v-model:value="formState.name" placeholder="请输入商品名称" />
			</a-form-item>
			<a-form-item label="商品价格" name="price">
				<a-input v-model:value="formState.price" type="text" prefix="￥"
					onkeyup="value=value.replace(/[^\d{1,}\.\d{1,}|\d{1,}]/g,'')" placeholder="请输入商品价格" />
			</a-form-item>
			<a-form-item label="商品品名" name="pro_name">
				<a-input v-model:value="formState.pro_name" type="text" placeholder="请输入商品品名" />
			</a-form-item>
			<a-form-item label="商品产地" name="place">
				<a-input v-model:value="formState.place" type="text" placeholder="请输入商品产地" />
			</a-form-item>
			<a-form-item label="商品材质" name="material">
				<a-input v-model:value="formState.material" type="text" placeholder="请输入商品材质" />
			</a-form-item>
			<a-form-item label="内胆类型" name="liner_type">
				<a-input v-model:value="formState.liner_type" type="text" placeholder="请输入内胆类型" />
			</a-form-item>
			<a-form-item label="商品克重" name="weight">
				<a-input v-model:value="formState.weight" onkeyup="value=value.replace(/[^\d{1,}\.\d{1,}|\d{1,}]/g,'')"
					type="text" placeholder="请输入商品克重" />
			</a-form-item>
			<a-form-item label="体验类型" name="ex_categories">
				<a-input v-model:value="formState.ex_categories" type="text" placeholder="请输入体验类型" />
			</a-form-item>
			<a-form-item label="图片" name="cover">
				<UPLOAD ref="uploadbox" :desc="'图片上传'" :num="1" @sendStatus="backimgurl" v-model:value="formState.cover" />
			</a-form-item>
			<a-form-item label="商品链接" name="url">
				<a-input v-model:value="formState.url" type="text" placeholder="请输入商品链接" />
			</a-form-item>
			<a-form-item label="商品介绍" name="intro">
				<a-textarea v-model:value="formState.intro" placeholder="请输入商品详情" :auto-size="{ minRows: 3, maxRows: 5 }" />
			</a-form-item>
			<a-form-item label="推荐首页" name="is_recd">
				<a-switch v-model:checked="formState.is_recd" />
			</a-form-item>

			<!-- <a-form-item label="选择方式" name="sale_type">
				<a-radio-group v-model:value="formState.sale_type">
					<a-radio :value="'1'"> 直售 </a-radio>
					<a-radio :value="'2'"> 预售 </a-radio>
				</a-radio-group>
			</a-form-item> -->

			<a-form-item label="自定义时间" name="datetime" v-if="formState.sale_type == '2'">
				<a-range-picker style="width: 400px" v-model:value="formState.datetime" show-time
					format="YYYY-MM-DD HH:mm:ss" />
			</a-form-item>
			<a-form-item :wrapper-col="{ span: 14, offset: 4 }">
				<a-button type="primary" html-type="submit">确定</a-button>
				<a-button style="margin-left: 10px" @click="handleCancel">取消</a-button>
			</a-form-item>
		</a-form>
	</a-modal>
</template>
<script>
import {
	defineComponent,
	reactive,
	ref,
	onMounted,
	nextTick,
	computed,
	getCurrentInstance
} from 'vue'
import moment from 'moment'
import { useStore, mapGetters } from 'vuex'
import { UPLOAD } from '/@/components'
import { addAlbumByGet, addGoodsByGet, updateGoods_get } from '/@/api'
export default defineComponent({
	props: {
		model: {
			type: Object,
			default: function () {
				return {}
			}
		},
		title: {
			type: String,
			default: ''
		},
		visible: {
			type: Boolean,
			default: function () {
				return false
			}
		},
		cid: null
	},
	emits: {
		'close-modal': null,
		ok: null
	},
	components: {
		UPLOAD
	},
	setup(props, context) {
		const formRef = ref()
		const uploadbox = ref(null)
		const formState = reactive({
			sale_type: '1',
			is_recd: false,
			goods_type: "1",
			datetime: [],
			limit_buy: "0"
		})
		const cate = ref([])
		const ablumlist = ref([])
		let validateImg = async (_rule, value) => {
			if (value == '') {
				return Promise.reject('请上传图片')
			} else {
				return Promise.resolve()
			}
		}
		const rules = {
			url: [{
				required: true,
				message: '请输入商品链接',
				trigger: 'blur'
			}],
			name: [
				{
					required: true,
					message: '请输入商品名称',
					trigger: 'blur'
				}
				// {
				// 	min: 3,
				// 	max: 5,
				// 	message: 'Length should be 3 to 5',
				// 	trigger: 'blur'
				// }
			],
			datetime: [
				{
					type: 'array',
					required: true,
					message: '请选择时间',
					trigger: 'change'
				}
			],
			cover: [
				{
					required: true,
					message: '请上传图片',
					trigger: 'blur'
				}
			],

			is_recd: [
				{
					required: false,
					message: '请选择是否推荐首页'
				}
			],

			goods_cate_id: [
				{
					required: true,
					message: '请选择分类',
					trigger: 'blur'
				}
			],
			goods_album_id: [
				{
					required: false,
					message: '请选择专辑',
					trigger: 'blur'
				}
			],
			name: [
				{
					required: true,
					message: '请输入商品名称',
					trigger: 'blur'
				}
			],
			goods_stock: [
				{
					required: true,
					message: '请输入数量',
					trigger: 'blur'
				}
			],
			tokenID: [{
				required: true,
				message: "请输入商品ID",
				trigger: 'blur'
			}],
			price: [
				{
					required: true,
					message: '请输入价格',
					trigger: 'blur'
				}
			],
			intro: [
				{
					required: true,
					message: '请输入商品详情',
					trigger: 'blur'
				}
			],
			weight: [
				{
					required: true,
					message: '请选择商品克重',
					trigger: 'blur'
				}
			],
			place: [{
				required: true,
				message: '请输入产地',
				trigger: 'blur'
			}],

			pro_name: [{
				required: true,
				message: '请输入商品品名',
				trigger: 'blur'
			}],
			material: [{
				required: true,
				message: '请输入商品材质',
				trigger: 'blur'
			}],
			liner_type: [{
				required: true,
				message: '请输入内胆类型',
				trigger: 'blur'
			}],
			ex_categories: [{
				required: true,
				message: '请输入体验类型',
				trigger: 'blur'
			}]
		}

		const onFinish = (values) => {
			context.emit('ok', {
				model: props.model,
				values
			})
		}

		const onFinishFailed = (errorInfo) => {
			console.log('Failed:', errorInfo)
			// console.log(uploadbox.value.list)
		}
		const handleCancel = () => {
			context.emit('close-modal', false)
		}
		const resetForm = () => {
			formRef.value.resetFields()
		}
		const backimgurl = (n) => {
			console.log(n)
			formState.cover = n.toString()
		}
		const changecate = (id) => {
			addGoodsByGet(id).then((res) => {
				const {
					result: { list }
				} = res
				ablumlist.value = list
			})
		}
		const stopInput = (e) => {
			var value = e.target._value;
			console.log(value)
		}
		onMounted(() => {
			const {
				edit,
				cover,
				create_time,
				ex_categories,
				id,
				intro,
				is_del,
				is_recd,
				liner_type,
				material,
				name,
				place,
				price,
				pro_name,
				status,
				url,
				weight,
			} = props.model
			if (edit) {
				formState.name = name
				formState.cover=cover
				formState.ex_categories = ex_categories
				formState.intro = intro
				formState.liner_type = liner_type 
				formState.price = price + ''
				formState.is_recd = is_recd ? true : false
				formState.material = material 
				formState.place = place 
				formState.pro_name = pro_name;
				formState.weight = weight 
				formState.url=url
				nextTick(() => {
					uploadbox.value.fileList.push({
						status: 'done',
						url: `${cover}`,
					})
					uploadbox.value.list.push(`${cover}`)
				})

			}
		})

		return {
			formRef,
			labelCol: {
				span: 6
			},
			wrapperCol: {
				span: 14
			},
			other: '',
			formState,
			rules,
			handleCancel,
			resetForm,
			backimgurl,
			uploadbox,
			onFinish,
			onFinishFailed,
			cate,
			changecate,
			ablumlist,
			stopInput
		}
	}
})
</script>